body {
  padding-top: 5rem;
  background-color: #002348;
  color: white;

}

.pDocTitle {left: 112px;}

a.nav-link {
  color: white;
  text-align: center;
  vertical-align: middle;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  position: relative;
  top: 50%;
  left: 220%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  
}



.selected {
  height: 104px;
  left: 0px;
  margin-top: 10px;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700 !important;
  font-size: 20px;
  line-height: 24px;


  color: #F9F9F9;

  background: #002348;
  border-radius: 7px 7px 0px 0px;
}


.logo {
  /* Lifesavers One on One */


  position: relative;
  width: 524px;
  height: 403px;
  left: -4px;
  top: -100px;

  background: url("Lifesavers One on One.png");
  z-index: 1;
}

.navbar {
  width: 100%;
  background: #003368;
}

.name {
  vertical-align: middle;
  float: right;
  
  color: white;
  padding-right: 430px;
  cursor: pointer;
}

a.navbar-text.name:hover {
  text-decoration: none;
  color: white;
}

.navbar-brand {

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 5px;
  gap: 10px;
  width: 67px;
  height: 70px;
  left: 40px;
  top: 22px;

  background: #002348;

  color: #33D69D !important;

}


.hero-banner p.hero {
  position: relative;
  float: right;
  right: 90px;
  top: 21px;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-size: 32px;
  line-height: 20px;
  color: #F9F9F9;
  

}

.hero-banner p.tagline {
  position: relative;
  width: 506px;
  height: 21px;
  right: -659px;
  top: 80px;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 21px;
  /* identical to box height */
  color: #F9F9F9;
}

/* See https://css-tricks.com/hash-tag-links-padding/ */
#index-page h4 {
  z-index: -100;
}

#index-page h4::before {
  z-index: -100;
  display: block;
  content: " ";
  margin-top: -4rem;
  height: 4rem;
  visibility: hidden;
  pointer-events: none;
}

.jumbotron {

  background: #000 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
  margin: 0 !important;
  color: white;
}

.jumbotron p {
  margin-top: 1em;
  font-size: 1.45em;
}

.btn-docu {

  background-color: #33D69D;
  color: #FFF;
  border-color: #121517;
  position: relative;
  justify-content: space-evenly;
  align-items: baseline;
  padding: 2px 41px;
  gap: 10px;
  align-content: center;
  flex-wrap: wrap;
  width: 71%;
  height: 50px;
  left: 14%;
  border-radius: 10px;
}

.btn-docu:hover,
.btn-docu:focus,
.btn-docu:active,
.btn-docu.active,
.open .dropdown-toggle.btn-docu {
  background-color: #33D69D;
  color: #FFF;
  border-color: #050607;
}



.feedback,
.hidden {
  display: none;
}

span.feedback {
  margin-left: 2em;
}

form.eg {
  width: 100%;
  padding-right: 25px;
}

form.eg label {
  font-weight: 550;
}

pre.json-display {
  background-color: ghostwhite;
  border: 1px solid silver;
  padding: 10px 20px;
}

.json-key {
  color: brown;
}

.json-value {
  color: navy;
}

.json-string {
  color: olive;
}




/* From http://tobiasahlin.com/spinkit/ */
.spinner {
  margin: 100px auto;
  width: 150px;
  height: 140px;
  text-align: center;
  font-size: 10px;
}

.spinner>div {
  background-color: #33D69D;
  height: 100%;
  width: 18px;
  display: inline-block;

  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {

  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4)
  }

  20% {
    -webkit-transform: scaleY(1.0)
  }
}

@keyframes sk-stretchdelay {

  0%,
  40%,
  100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }

  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

section#content {
  height: 35rem;
}

.homeBody {
  position: relative;
  width: 1264px;
  height: 464px;
  left: calc(50% - 1264px/2);
  top: 163px;
  border-radius: 7px;
}

.hero-banner {
  position: relative;
  height: 360px;
  left: -4px;
  right: 0px;
  top: -480px;
  background-image: linear-gradient(to bottom right, #011830, #1861ad);
  border-radius: 7px;

}


.moreInfo {
  position: relative;
}

div.arrow img {
  position: relative;
  width: 46%;
  top: -5px;
  left: -15px;
}

.buttonGroup {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.footer {
  width: 100%;
  position: relative;
  bottom: 0;
  left: 0;
  padding-bottom: 5.5rem;
}

.startbox1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2px 41px;
  position: relative;
  width: 218px;
  height: 58px;
  left: 92px;
  top: 75px;
  background: #33D69D;
  border-radius: 9px;
  /*  */
  font-weight: 700;
  /* border: 2px solid black; */
}


.startbox1 a {
  color: #1c1c1c;
}


.startbox2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2px 41px;
  position: relative;
  width: 218px;
  height: 58px;
  left: 0px;
  top: 0px;
  color: white;
  font-weight: bold;
  background: #33D69D;
  border-radius: 3px;

}

a.done {
    padding: 10px 41px;
    background: #33D69D;
    line-height: 80px;
    border-radius: 9px;
    
    font-weight: 700;
    border: 2px solid black;
    color: whitesmoke;
}
a.cta.learnMore {
  padding-right: 5rem;
  padding-left: 5rem;
} 

a.cta {
  padding-left: 20px;
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
  /* height: 20px; */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 20px;
  align-items: center;
  color: black;
  padding-right: 1rem;
  border: 3.5px solid #33D69D;
  border-radius: 7px;
  background: #33D69D;
}

.ctaLeft{
  left: 31%;
  top: 213px;
  position: absolute;
  }
  
  .ctaRight{
  left: 52%;
  top: 212px;
  position: absolute;
  }

.footLead {
  font-family: 'Roboto';
  font-size: 31pt;
  /* font-weight: 700; */
  line-height: 29px;
  letter-spacing: 0em;
  text-align: center;
  margin-top: 30px;
  padding-top: 35px;
  padding-bottom: 35px;
  
}

.footSub {
  font-family: 'Roboto';
  font-size: 18px;
  font-weight: 400;
  line-height: 0px;
  letter-spacing: 0em;
  text-align: center;
}

.profileimg {
  background: url("/assets/Default Profile Picture.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  border: 1px solid;
  border-radius: 50%;
  position: relative;
  width: 250px;
  height: 250px;
  left: 48.6px;
  top: 35.91px;

}

.consent {
  position: relative;
  width: 400px;
  height: 460px;
  top: 24px;
  /* background: #024081; */
  background-image: linear-gradient(to bottom left, #78a8ff, #0878a3);
  border-radius: 7px;
  border: 2px solid #00172e;
  left: 90px;
}

.consent>p {
  position: relative;
  width: 191px;
  height: 29px;
  /* left: 116px; */
  top: 40px;
  /* font-family: 'Roboto'/
  /* font-style: normal; */
  font-weight: bold;
  font-size: 24px;
  line-height: 29px;
  color: #F9F9F9;
}

.financial {
  position: relative;
  width: 400px;
  height: 460px;
  top: -437px;
  /* background: #024081; */
  background-image: linear-gradient(to bottom left, #78a8ff, #0878a3);
  right: -533px;
  border-radius: 7px;
  border: 2px solid #00172e;
}

.financial>p {
  position: relative;
  width: 191px;
  height: 29px;
  /* left: 102px; */
  top: 40px;
  /* font-family: 'Roboto'/
  /* font-style: normal; */
  font-weight: bold;
  font-size: 24px;
  line-height: 29px;
  color: #F9F9F9;
}



.profile {
  position: relative;
  width: 1086px;
  height: 324px;
  /* height: 1177px; exposed */
  background: #024081;
  border-radius: 7px;
}

a.showmore {
  /* float: right; */
  /* position: relative; */
  right: 80px;
  bottom: -30px;
  color: #33D69D;
  font-size: 30px;
}

.showArrow {
  background: url(/assets/grnArrow.png);
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: 27% 90%;
  position: absolute;
  color: #33D69D;
  height: 75px;
  right: 147px;
  width: 254px;
  rotate: 90deg;
  /* rotate: 270deg; */
}

.formContainer {
  display: flex;
  /* align-items: center; */
  background: #024081;
  flex-direction: column;
  justify-content: center;
  border-radius: 4px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 2rem;
  margin-right: 40px;
  box-shadow: 0 9px 20px #000000;
  margin-bottom: 40px;
}

h4.consentLead {
  color: white;
  /* left: -176px; */
  position: relative;
  
}

p.consentSub {
  color: white;
  position: relative;
  /* left: 10px; */
  font-size: 14px;
  margin-right: 30px;
}

h4.financLead {
  color: white;
  /* left: -75px; */
  position: relative;
  
}

p.financSub {
  color: white;
  position: relative;
  /* left: 49px; */
  font-size: 13px;
}


.liGreen {
  display: inline-block;
  
  margin: 0;
}

.liGreen::before {

  color: #33D69D;
  font-weight: bold;
  content: "\2022";
  margin: 15px;

}

.behindScenes {
  display: none;
  margin-top: 65px;
  border-radius: 8px;
  /* padding: 30px; */
  width: 100%;
  /* overflow: hidden; */
}

.tryIt {
  padding: 2px 41px;
  position: relative;
  display: inline-block;
  width: 245px;
  height: 58px;
  left: 125px;
  top: -160px;
  background: #33D69D;
  border-radius: 9px;
  
  font-weight: 700;
  z-index: 3
}

.tryItMore {
  padding: 2px 41px;
  position: relative;
  display: none;
  width: 245px;
  height: 58px;
  left: 180px;
  top: -156px;
  background: none;
  color: #f1f1f1;
  border: none;
  
  font-weight: 700;
  z-index: 1;
}

.tryItSrc {
  padding: 2px 41px;
  position: relative;
  display: inline-block;
  width: 245px;
  height: 58px;
  left: 414px;
  top: -219px;
  background: #33D69D;
  border-radius: 9px;
  
  font-weight: 700;
}

.modal.custom .modal-dialog {
  color: black;
}


.bottomCopy {
  bottom: -1rem;
  position: absolute;
  display: initial;
  left: 44%;
  margin-bottom: 40px;
}

.resContainer {
  text-align: center;
  position: relative;
  top: 5rem;
  background-image: linear-gradient(to bottom right, #011830, #1861ad);
  padding: 30px;
  border: 2px solid #00172e;
  border-radius: 12px;
  box-shadow: 0 9px 20px #000000;
}



@media (max-width: 1320px) {


  .ctaRight {
    left: 46%;
    top: 194px;
    position: absolute;
}
  a.nav-link {
    left: 50%;
  }

  .ctaLeft{
    left: 14%;
    top: 193px;
    position: absolute;
    }

  .bottomCopy {
    bottom: -10rem;
    position: absolute;
    display: initial;
  }

  a.cta {
    left: 26%;
  }


  .name {

    padding-right: 120px;

  }

}

